<script setup>
import { ArrowRight } from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue';
import axios from "axios";
import {ElMessage} from "element-plus";
import {userStore} from "@/stores/UserStore.js";

const businessId = ref(userStore().userId);
const dialogFormVisible = ref(false)
const EditFormVisible = ref(false)
const shopItemTableVisible = ref(false)
const tableData = ref([
  {
    id: 0,
    name: '默认数据',
    address: '默认数据',
    phone: '默认数据'
  },
  {
    id: 0,
    name: '默认数据',
    address: '默认数据',
    phone: '默认数据'
  }
  // ... (其他数据项)
]);
const itemTableData = ref([
  {
    id: 0,
    name: '默认数据',
    price: '默认数据',
    imageUrl: '默认数据',
  },
  {
    id: 0,
    name: '默认数据',
    price: '默认数据',
    imageUrl: '默认数据',
  }
  // ... (其他数据项)
]);
const dialogWidth = '30vw'
const formLabelWidth = '140px'
const columnProps = (prop) => ({ prop });
onMounted(() => {
  getTableData();
});
const form = reactive({
  id:'',
  name: '',
  address: '',
  phone: ''
})
function getTableData(){
  axios
      .get(`/api/business/getShops?businessId=${businessId.value}`)
      .then(response => {
        if(response.data.code === 200){
          // ElMessage.success("获取数据成功")
          tableData.value = response.data.data
        }else {
          ElMessage.error("获取数据失败")
        }
      })
      .catch(error => {
        ElMessage.error("内部错误")
      });
}
function addShop(){
  const shopRequestDto = {
    businessId:businessId.value,
    name: form.name,
    address: form.address,
    phone: form.phone
  }
  axios
      .post(`/api/business/createShop`,shopRequestDto)
      .then(response => {
        if(response.data.code === 200){
          ElMessage.success("增加店铺成功")
          getTableData()
          dialogFormVisible.value = false
        }else {
          ElMessage.error("增加店铺失败")
        }
      })
      .catch(error => {
        ElMessage.error("内部错误")
      });
}
function handleEdit(row){
  Object.assign(form, {
    id: row.id,
    name: row.name,
    address: row.address,
    phone: row.phone
  });
  EditFormVisible.value = true;
}
function getShopItemList(shopId){
  axios
      .get(`/api/shop/getShopItemList?shopId=${shopId}`)
      .then(response => {
        if(response.data.code === 200){
          ElMessage.success("获取商品列表成功")
          itemTableData.value = response.data.data
        }else {
          ElMessage.error("获取商品列表失败")
        }
      })
      .catch(error => {
        ElMessage.error("内部错误")
      });
  shopItemTableVisible.value = true;
}
</script>

<template>
  <el-container class="container">
    <el-row class="navigation">
      <!--导航-->
      <el-breadcrumb :separator-icon="ArrowRight" class="navigationItem">
        <el-breadcrumb-item class="navigationItemText">首页</el-breadcrumb-item>
        <el-breadcrumb-item class="navigationItemText">店铺管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row class="search">
      <el-form-item class="searchItem">
        <el-text size="large" class="searchItemText">搜索: </el-text>
      </el-form-item>
      <!-- 搜索筛选 -->
      <el-form-item class="searchItem">
        <el-input size="large" placeholder="输入店铺名称" class="searchItemInput"></el-input>
      </el-form-item>
      <el-form-item class="searchItem">
        <el-button type="primary" @click="search" class="searchItemButton">搜索</el-button>
        <el-button type="primary" @click="dialogFormVisible = true" class="searchItemButton">添加</el-button>
      </el-form-item>
    </el-row>
    <el-row class="list">
      <!--列表-->
      <el-table size="large"
                highlight-current-row
                class="listTable"
                :data="tableData">
        <el-table-column align="center" type="selection" width="100">
        </el-table-column>
        <el-table-column label="店铺编号" class="listTableItem" v-bind="columnProps('id')" width="300">
        </el-table-column>
        <el-table-column label="店铺名称" class="listTableItem" v-bind="columnProps('name')" width="300">
        </el-table-column>
        <el-table-column label="店铺地址" class="listTableItem" v-bind="columnProps('address')" width="300">
        </el-table-column>
        <el-table-column label="店铺电话" class="listTableItem" v-bind="columnProps('phone')" width="300">
        </el-table-column>
        <el-table-column label="操作" class="listTableItem">
          <template #default="{ row }">
            <el-button link type="primary" size="small" @click="handleEdit(row)">编辑</el-button>
            <el-button link type="primary" size="small" @click="getShopItemList(row.id)">商品管理</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- 新增店铺弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="新增店铺" :width="dialogWidth" style="text-align: center;">
      <el-form :model="form" >
        <el-form-item label="店铺名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="店铺地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="店铺电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="addShop">保存</el-button>
      </span>
      </template>
    </el-dialog>
    <!-- 编辑店铺弹窗-->
    <el-dialog v-model="EditFormVisible" title="编辑店铺信息" :width="dialogWidth" style="text-align: center;">
      <el-form :model="form" >
        <el-form-item label="店铺名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="店铺地址" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off" />
        </el-form-item>
        <el-form-item label="店铺电话" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">更新</el-button>
      </span>
      </template>
    </el-dialog>
    <!--店铺商品弹窗-->
    <el-dialog v-model="shopItemTableVisible" title="店铺商品列表">
      <!--列表-->
      <el-table size="large"
                highlight-current-row
                class="listTable"
                :data="itemTableData">
        <el-table-column align="center" type="selection">
        </el-table-column>
        <el-table-column label="商品编号" class="listTableItem" v-bind="columnProps('id')">
        </el-table-column>
        <el-table-column label="商品名称" class="listTableItem" v-bind="columnProps('name')">
        </el-table-column>
        <el-table-column label="商品价格" class="listTableItem" v-bind="columnProps('price')">
        </el-table-column>
        <el-table-column label="操作" class="listTableItem">
          <template  #default="{ row }">
            <el-button link type="primary" size="small" @click="downShopItem(row.id)">下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-container>
</template>

<style scoped>
.container{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
}
.navigation{
  display: flex;
  width: 100vw;
  height: 8vh;
  flex-direction: row;
  margin-left: 1vw;
}
.navigationItem{
  display: flex;
  align-items: center;
  justify-self: center;
}
.navigationItemText{
  font-size: 1vw;
}
.search {
  display: flex;
  width: 100vw;
  height: 8vh;
}

.searchItem {
  display: flex;
  align-items: center;
  margin-right: 20px; /* 可以根据需要调整间距 */
}
.searchItemText{
  margin-left: 1vw;
  border: 1px;
}
.searchItemInput{

}
.searchItemButton{

}
.list{
  display: flex;
  width: 100vw;
  flex-direction: column;
}
.listTable{
  display: flex;
}
.listTableItem{
  width: 25vw;
}
</style>